<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                    <div class="normal-list-page-bd">
                        <Table border
                               :loading="list.loading"
                               :columns="list.columns"
                               :data="list.tableData"
                               @on-selection-change="selectionChange"></Table>
                    </div>
                    <div class="normal-list-page-ft clearfix">
                        <Page class="fr"
                              :total="queryData.totalRecord"
                              :page-size="queryData.pageSize"
                              :current="queryData.page"
                              @on-change="changePage"
                              @on-page-size-change="onPageSizeChange"
                              show-elevator
                              show-total
                              show-sizer></Page>
                    </div>
                </div>
                <!--修改规格属性-->
                <Modal v-model="modal.spec.isShow"
                       :loading="modal.spec.loading"
                       :mask-closable="false"
                       :title="modal.spec.title"
                       @on-ok="postData">
                    <Form ref="systemFrom"
                          :model="modal.spec.formData"
                          :rules="modal.spec.rules"
                          :label-width="120">
                        <FormItem label="规格组id"
                                  prop="groupId">
                            <Input disabled
                                   v-model="modal.spec.formData.groupId"
                                   style="width:300px;" />
                        </FormItem>
                        <FormItem label="规格属性名称"
                                  prop="name">
                            <Input placeholder="请输入规格属性名称"
                                   v-model="modal.spec.formData.name"
                                   style="width:300px;" />
                        </FormItem>
                        <FormItem label="通用规则"
                                  prop="generic">
                            <i-switch size="large"
                                      @on-change="change"
                                      v-model="modal.spec.formData.generic"
                                      :value="modal.spec.formData.generic">
                                <span slot="open">是</span>
                                <span slot="close">否</span>
                            </i-switch>
                        </FormItem>
                        <FormItem label="搜索关键词"
                                  prop="search">
                            <i-switch size="large"
                                      @on-change="change"
                                      v-model="modal.spec.formData.search"
                                      :value="modal.spec.formData.search">
                                <span slot="open">是</span>
                                <span slot="close">否</span>
                            </i-switch>
                        </FormItem>
                    </Form>
                </Modal>
                <!-- 添加规格值 -->
                <Modal v-model="modal.value.isShow"
                       :loading="modal.value.loading"
                       :mask-closable="false"
                       :title="modal.value.title"
                       @on-ok="postValue">
                    <Form ref="systemFrom"
                          :model="modal.value.formData"
                          :rules="modal.value.rules"
                          :label-width="120">
                        <FormItem label="规格组属性id"
                                  prop="paramId">
                            <Input disabled
                                   v-model="modal.value.formData.paramId"
                                   style="width:300px;" />
                        </FormItem>
                        <FormItem label="规格组属性值"
                                  prop="value">
                            <Input placeholder="请输入规格组属性值"
                                   v-model="modal.value.formData.value"
                                   style="width:300px;" />
                        </FormItem>
                        <!-- 通过数值类型开关来判断是否显示数值类型单位 -->
                        <FormItem label="数值类型"
                                  prop="generic">
                            <i-switch size="large"
                                      @on-change="changeNumber"
                                      v-model="modal.value.formData.isNumber"
                                      :value="modal.value.formData.isNumber">
                                <span slot="open">是</span>
                                <span slot="close">否</span>
                            </i-switch>
                        </FormItem>
                        <FormItem label="单位"
                                  prop="unit"
                                  v-if="showUnit">
                            <Input placeholder="请输入单位"
                                   v-model="modal.value.formData.unit"
                                   style="width:300px;" />
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        </div>
    </div>
</template>
<script>
// import SpecApi from '@/api/business/spec.js'
import SpecApi from '@/api/business/specNew.js'
import ValueApi from '@/api/business/value.js'
import submenu from './defaultSpecValue.vue'
import { Message } from 'iview'
import WangEditor from '@/components/Editor/WangEditor.vue'
import Uploadoss from '@/components/uploadoss'
import uploadImage from '@/components/upload-image/upload-image'
export default {
	name: 'mallCategory',
	components: {
		uploadImage,
		WangEditor,
		Uploadoss,
		submenu
	},
	props: {
		row: Object
	},
	data() {
		return {
			showUnit: false,
			// 弹出层数据
			modal: {
				spec: {
					isShow: false,
					loading: true,
					type: 'update', // create 新建，update 修改
					title: '修改',
					formData: {}
				},
				value: {
					isShow: false,
					loading: true,
					type: 'create', // create 新建，update 修改
					title: '添加属性值',
					formData: {}
				}
			},
			// 列表
			list: {
				loading: false,
				selections: [],
				// 列表展示数据
				tableData: [],
				// 表格表头
				columns: [
					/** 开始自动生成 */
					{ title: 'id', minWidth: 120, key: 'id', align: 'center' },
					{
						type: 'expand',
						width: 60,
						align: 'center',
						render: (h, params) => {
							return this.$createElement(submenu, {
								ref: 'child',
								props: {
									row: params.row
								}
							})
						}
					},
                    {
						title: '规格组名称',
						minWidth: 210,
						key: 'specGroupName',
						align: 'center'
					},
					{
						title: '规格属性名称',
						minWidth: 120,
						key: 'name',
						align: 'center'
					},
					// {
					// 	title: '商品id',
					// 	minWidth: 100,
					// 	key: 'spuId',
					// 	align: 'center'
					// },
					// {
					// 	title: '规格组id ',
					// 	minWidth: 100,
					// 	key: 'groupId',
					// 	align: 'center'
					// },
					{
						title: '搜索关键词',
						key: 'search',
						align: 'center',
						width: '130px',
						render: (create, params) => {
							let s = params.row.search
							let color, text
							if (s) {
								color = '#5ed71a'
								text = '是'
							} else {
								color = '#d72c23'
								text = '否 '
							}
							return create(
								'div',
								{
									style: {
										color: color,
										borderRadius: '20px'
									}
								},
								text
							)
						}
					},
					{
						title: '通用规则',
						key: 'generic',
						align: 'center',
						width: '130px',
						render: (create, params) => {
							let s = params.row.generic
							let color, text
							if (s) {
								color = '#5ed71a'
								text = '是'
							} else {
								color = '#d72c23'
								text = '否 '
							}
							return create(
								'div',
								{
									style: {
										color: color,
										borderRadius: '20px'
									}
								},
								text
							)
						}
					},
                    {
						title: '商品属性',
						key: 'isPublic',
						align: 'center',
						width: '130px',
						render: (create, params) => {
							let s = params.row.isPublic
							let color, text
							if (s) {
								color = '#5ed71a'
								text = '公有'
							} else {
								color = '#d72c23'
								text = '私有 '
							}
							return create(
								'div',
								{
									style: {
										color: color,
										borderRadius: '20px'
									}
								},
								text
							)
						}
					},
					{
						title: '创建时间',
						align: 'center',
						key: 'createTime',
						minWidth: 100
					},
					{
						title: '更新时间',
						align: 'center',
						key: 'updateTime',
						minWidth: 100
					},
					/** 自动生成结束 */
					{
						title: '操作',
						align: 'center',
						minWidth: 150,
						render: (h, params) => {
							return h('div', { class: 'action-group' }, [
								h(
									'Tooltip',
									{
										props: {
											placement: 'left',
											content: '添加属性值'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'success',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														// this.showUpdateModal(params.index);
														this.showCreateModal(
															params.row
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type: 'md-git-network',
														size: 18
													}
												})
											]
										)
									]
								),
								h(
									'Tooltip',
									{
										props: {
											placement: 'left',
											content: '编辑'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'primary',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														// this.showUpdateModal(params.index);
														this.showUpdateModal(
															params.row
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type:
															' iconfont icon-bianjisekuai',
														size: 18
													}
												})
											]
										)
									]
								),

								h(
									'Tooltip',
									{
										props: {
											placement: 'right',
											content: '删除'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'error',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														this.delData(
															params.row.id
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type:
															' iconfont icon-shanchusekuai',
														size: 18
													}
												})
											]
										)
									]
								)
							])
						}
					}
				]
			},
			// 页面查询数据
			queryData: {
				limit: 10,
				page: 1,
				totalRecord: 0,
				name: ''
			},
            businessIDMes:''
		}
	},
	methods: {
		// 规格组参数列表
		getTableData() {
			const that = this
			that.queryData.totalRecord = undefined
			//  that.list.loading=true
			that.queryData.groupId = that.row.id
            // that.queryData.isPublic = true
			SpecApi.getPageList(that.queryData)
				.then(res => {
					var addField = res.data.list
					addField.forEach((value, index) => {
						value['specGroupName'] = that.row.name
					})
                    
					that.list.tableData = addField
					that.queryData.totalRecord = res.data.totalRecord
					that.queryData.page = res.data.pageNum
					that.queryData.limit = res.data.pageSize
					// that.queryData.totalRecord = res.data.totalRecord
					// that.queryData.page = res.data.pageNum
					// that.queryData.limit = res.data.pageSize
				})
				.catch(error => {
					Message.error(error)
				})
		},

		// 修改规格组参数
		postData() {
			const that = this
			SpecApi.update(
				that.modal.spec.formData.id,
				that.modal.spec.formData
			)
				.then(res => {
					that.modal.spec.isShow = false
					that.modal.spec.loading = false
					if (!res.code) {
						that.getTableData()
						that.$Notice.success({
							title: '保存成功!'
						})
					} else {
						that.$Notice.error({
							title: res.message
						})
					}
				})
				.catch(error => {
					Message.error(error)
				})
		},
		// 新建属性值,添加规格组属性值
		postValue() {
			const that = this
			that.modal.value.formData.groupId = that.row.id
			ValueApi.add(that.modal.value.formData)
				.then(res => {
					that.modal.value.isShow = false
					that.modal.value.loading = false
					if (!res.code) {
						that.getTableData()
						that.$Notice.success({
							title: '保存成功!'
						})
					} else {
						that.$Notice.error({
							title: res.message
						})
					}
				})
				.catch(error => {
					Message.error(error)
				})
		},
		// 新建&修改
		postData1() {
			const that = this
			that.$refs['systemFrom1'].validate(valid => {
				if (valid) {
					MallCategoryApi.add(that.modal.mallCategory.formData)
						.then(res => {
							that.modal.mallCategory.isShow = false
							that.modal.mallCategory.loading = false
							if (!res.code) {
								that.getTableData()
								that.$Notice.success({
									title: '保存成功!'
								})
							} else {
								that.$Notice.error({
									title: res.message
								})
							}
						})
						.catch(error => {
							Message.error(error)
						})
				} else {
					that.modal.mallCategory.loading = false
					that.$nextTick(() => {
						that.modal.mallCategory.loading = true
					})
				}
			})
		},

		// 删除规格组参数
		delData(ids) {
			this.$Modal.confirm({
				title: '确认删除',
				content:
					'<p>您确认删除id为 <strong>' +
					ids.toString() +
					'</strong> 的规格属性吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
				loading: true,
				onOk: () => {
					SpecApi.del({id:ids}).then(res => {
						this.$Modal.remove()
						if (!res.code) {
							this.$Notice.success({
								title: '删除成功'
							})
							this.queryData.page = 1
							this.getTableData()
						} else {
							this.$Notice.error({
								title: res.message
							})
						}
					})
				}
			})
		},
		// 图片的校验
		calcImg() {
			let imgUrl = this.modal.mallCategory.formData.uploadList.map(v => {
				if (v.length < 1) return v
				v = v.response.res.requestUrls[0]
				return v
			})
			this.modal.mallCategory.formData.icon = imgUrl[0]
		},
		// 排量删除
		batchDel() {
			let ids = []
			this.list.selections.forEach(element => {
				ids.push(element.id)
			})
			if (!ids.length) {
				this.$Message.error({
					content: '请先选择要删除的项！',
					duration: 3
				})
			}
			this.delData(ids)
		},

		// 全选，不全选
		selectionChange(args) {
			this.list.selections = args
		},

		// 每页显示记录数变更
		onPageSizeChange(pageSize) {
			this.queryData.limit = pageSize
			this.getTableData()
		},

		// 换页
		changePage(page) {
			this.queryData.page = page
			this.getTableData()
		},
		// 数值类型
		changeNumber(e) {
			this.showUnit = e
		},
		// 显示新建属性值弹窗
		showCreateModal(row) {
			this.modal.value.type = 'create'
			this.modal.value.title = '新建属性值'
			this.modal.value.formData = {}
			this.modal.value.formData.spuId = row.spuId
			this.modal.value.formData.paramId = row.id
			this.modal.value.formData.groupId = row.groupId
			this.modal.value.formData.isNumber = false
            this.modal.value.formData.isPublic = true
            // this.modal.value.formData.businessId = this.businessIDMes.businessId
            // this.modal.value.formData.businessName = this.businessIDMes.businessName
			this.showUnit = false
			this.modal.value.isShow = true
		},
		//
		showCreateZilei() {
			this.modal.mallCategory.type = 'create'
			this.modal.mallCategory.title = '新建子类'
			this.modal.mallCategory.formData = {}
			this.modal.mallCategory.Show = true
		},

		// 显示修改弹窗
		showUpdateModal(row) {
			this.modal.spec.type = 'update'
			this.modal.spec.title = '修改规格属性'
			// 不请求后端，直接list取对象
			// this.modal.mallCategory.formData = JSON.parse(
			//   JSON.stringify(this.list.tableData)
			// )[index];
			this.modal.spec.formData = row
			this.modal.spec.isShow = true
		}
	},

	created() {
		this.getTableData()
	},
}
</script>
